<template>
  <div class="">
    <el-upload
      :class="uploadType === 'excel' ? 'upload-demo' : 'avatar-uploader'"
      :action="actionUrl + '/api/v1/common-file/upload'"
      :list-type="uploadType === 'excel' ? '' : 'picture-card'"
      :show-file-list="false"
      :on-preview="handlePictureCardPreview"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :headers="myHeader"
      :data="myData"
      :before-upload="beforeAvatarUpload"
    >
      <el-button
        v-if="uploadType === 'excel'"
        size="small"
        type="primary"
      >选择文件</el-button>
      <img
        v-else-if="uploadType !== 'excel' && dialogImageUrl"
        :src="dialogImageUrl"
        class="avatar"
      >
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserUpload',
  props: {
    usageName: {
      type: String,
      default: ' '
    },
    imageUrl: {
      type: String,
      default: ''
    },
    uploadType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      actionUrl: process.env.VUE_APP_TMS_IAM_HOST,
      dialogImageUrl: '',
      myHeader: { token: '' },
      myData: { usage: '' },
      dialogVisible: false
    }
  },
  watch: {
    imageUrl() {
      if (this.imageUrl) {
        this.dialogImageUrl = `${process.env.VUE_APP_TMS_IAM_HOST}/api/v1/common-file/download/${this.imageUrl}`
      }
    }
  },
  created() {
    this.myHeader.token = this.$store.state.user.token
    this.myData.usage = this.usageName
    console.log(this.dialogImageUrl)
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if (this.uploadType === 'excel') {
        this.$emit('handleSucces', {
          usageName: this.usageName,
          url: response
        })
      } else {
        this.dialogImageUrl = `${process.env.VUE_APP_TMS_IAM_HOST}/api/v1/common-file/download/${response}`
        this.$message.success('上传成功')
        this.$emit('handleSucces', {
          usageName: this.usageName,
          url: response
        })
      }
    },
    handleAvatarError(err, file, fileList) {
      this.$message.error(err.errorMsg)
      this.$emit('handleError', err)
    },
    handlePictureCardPreview() {
      this.dialogVisible = true
    },
    beforeAvatarUpload(file) {
      if (this.uploadType === 'excel') {
        const isExcel =
          file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        if (!isExcel) {
          this.$message.warning('上传文件只能是 Excel 格式!')
          return isExcel
        }
      } else {
        const isJPG =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg' ||
          file.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 5

        if (!isJPG) {
          this.$message.warning('上传图片只能是 JPG、gif、png、jpeg 格式!')
        }
        if (!isLt2M) {
          this.$message.warning('上传头像图片大小不能超过 5MB!')
        }
        return isJPG && isLt2M
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 100%;
  height: 100%;
}
</style>
